<template >
	<div class="content">
		<div class="content-header">教师账户管理</div>
		<div class="content-table">
			<el-form inline size="mini">
				<el-form-item >
					<el-input  placeholder="请输入姓名" v-model="form.userName"></el-input>
				</el-form-item>
				<el-form-item >
					<el-select v-model="form.classId"  placeholder="请选择班级" style="width: 100%">
						<el-option
								v-for="item in classList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item >
					<el-date-picker
							v-model="time"
							format="yyyy/MM/dd"
							value-format="yyyy/MM/dd"
							@change="changeTime"
							type="daterange"
							range-separator="至"
							start-placeholder="更新始"
							end-placeholder="更新束">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="getList">查 询</el-button>
					<el-button icon="el-icon-refresh" @click="resetList">重 置</el-button>
					<el-button type="primary" icon="el-icon-plus" @click="addDialog = true">新 建</el-button>
					<el-button icon="el-icon-download" @click="downloadFile">下载模板</el-button>
					<el-upload
							style="display: inline-block;margin: 0 10px"
							class="upload-demo"
							:action=uploadUrl
							:headers=myHeaders
							ref="upload"
							:on-success="leadingIn"
							:limit="1"
							:show-file-list="false"
					>
						<el-button size="mini">批量导入</el-button>
					</el-upload>
				</el-form-item>
			</el-form>
			<el-table
					:data="tableData"
					stripe
					style="width: 100%">
				<el-table-column
						prop="number"
						label="自增编号"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="userName"
						label="姓名"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="loginName"
						label="账户"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="password"
						label="密码"
						align="center"
				>
				</el-table-column>
				<el-table-column
						label="班级"
						align="center"
						show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{scope.row.className ? scope.row.className : '暂未分配班级' }}
					</template>
				</el-table-column>
				<el-table-column
						prop="createTime"
						label="最近登陆时间"
						show-overflow-tooltip
						align="center"
				>
				</el-table-column>
				<el-table-column
						label="操作"
						align="center"
				>
					<template slot-scope="scope">
						<el-button type="primary" size="mini"  @click="openEdit(scope.row)">编 辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.id)">删 除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-footer">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					background
					:page-size="10"
					small
					layout="total, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		<!--新增账户-->
		<el-dialog title="新增账户" :visible.sync="addDialog" width="25%">
			<el-form label-width="90px" size="small" :model="addForm" :rules="rules" ref="addForm">
				<el-form-item label="账户:" prop="loginName">
					<el-input v-model="addForm.loginName" placeholder="请输入账户"></el-input>
				</el-form-item>
				<el-form-item label="姓名:" prop="userName">
					<el-input v-model="addForm.userName" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="密码:" prop="password">
					<el-input v-model="addForm.password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="班级:">
					<el-select v-model="addForm.classIds" multiple placeholder="请选择班级" style="width: 100%">
						<el-option
								v-for="item in classList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="submit('addForm')" size="small">确 定</el-button>
			</div>
		</el-dialog>
		<!--编辑账户-->
		<el-dialog title="编辑账户" :visible.sync="editDialog" width="25%">
			<el-form label-width="90px" size="small" :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="账户:" prop="loginName">
					<el-input v-model="editForm.loginName" placeholder="请输入账户"></el-input>
				</el-form-item>
				<el-form-item label="姓名:" prop="userName">
					<el-input v-model="editForm.userName" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="密码:" prop="password">
					<el-input v-model="editForm.password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="班级:">
					<el-select v-model="editForm.classIds" multiple placeholder="请选择班级" style="width: 100%">
						<el-option
								v-for="item in classList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="submitEdit('editForm')" size="small">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template >

<script >
    import {dleUser, userList, addTeacher, editStudent,editTeacher} from "../api/user";
    import {classPage} from "../api/class";
    import common from "../utils/common";
    import request from "../utils/request";

    export default {
        data(){
            return{
                uploadUrl: common.requestUrl + '/user/uploadTeacher',
                myHeaders: {
                    ferment: ''
                },
                time:'',
                classList:[],
                form:{
                    classId: null,
                    endTime: "",
                    pageIndex: 1,
                    pageSize: 10,
                    roleFlag: 1,
                    startTime: "",
                    type: null,
                    userName: ""
                },
                tableData:[],
                total:null,
                addDialog:false,
                addForm:{
                    classIds: [],
                    loginName: "",
                    password: "",
                    userName: ""
                },
                rules: {
                    classId: [
                        { required: true, message: '请选择班级', trigger: 'change' }
                    ],
                    password: [
                        {required: true, message: '请输入账户密码', trigger: 'blur'},
                        {min: 6, max: 18, message: '长度在 6 到 18 位', trigger: 'blur'}
                    ],
                    loginName:[
                        {required: true, message: '请输入账户', trigger: 'blur'},
                    ],
                    userName:[
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                    ],
                },
                editDialog:false,
                editForm:{}
            }
        },
        created() {
            this.myHeaders.ferment = sessionStorage.getItem('token')
        },
		mounted() {
            this.getList()
			this.getClassList()
        },
        methods: {
            //下载模板
            downloadFile() {
                request({
                    url: common.requestUrl + "/user/teacherTemplate",
                    method: 'get',
                    responseType: 'blob',
                }).then(resp => {
                    console.log('ppp', resp)
                    const blob = new Blob([resp.data], {type: "application/vnd.ms-excel"});
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement('a');
                    a.download = '教师模板.xls';
                    a.href = url;
                    a.click();
                })  //导出文件请求
            },
            //上传模板
            leadingIn(res) {
                if (res.code !== 200) {
                    let str = ''
                    res.data.forEach(item => {
                        return  str += item + "<br>"
                    })
                    this.$notify({
                        type: 'error',
                        title: res.message,
                        dangerouslyUseHTMLString: true,
                        message: str,
                        duration:0
                    });
                } else {
                    this.$notify.success(res.message)
                    this.getList()
                }
                this.$refs.upload.clearFiles() //上传成功之后清除历史记录
            },
            //获取班级数据
            async getClassList(){
                const { data } = await classPage()
                if (data.code === 200){
                    this.classList = data.data
                }
            },
            //查询列表
            async getList(){
                const { data } = await userList(this.form)
                if (data.code === 200){
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
            },
            //时间
            changeTime(val){
                this.form.startTime = val[0]
                this.form.endTime = val[1]
            },
            //重置
            resetList(){
                this.time = ''
                this.form.startTime = ''
                this.form.endTime = ''
                this.form.classId = null
                this.form.type = null
                this.form.userName = ''
                this.getList()
            },
            //新增账户
            submit(addForm){
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
                        addTeacher(this.addForm).then(res => {
                            if (res.data.code === 200){
                                this.$notify.success(res.data.message)
                                this.addDialog = false
                                this.addForm = {}
                                this.getList()
                            }
                        })
                    }
                });
            },
            //删除账户
            del(id){
                this.$confirm('删除该账户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    dleUser(id).then(res => {
                        if (res.data.code === 200){
                            this.$notify.success(res.data.message)
                            this.getList()
                        }
                    })
                })
            },
            //编辑弹窗
            openEdit(item){
                const { id,classIds,loginName,password,userName} = item
                this.editForm = {  id,classIds,loginName,password,userName}
                this.editDialog = true
            },
            //提交编辑
            submitEdit(editForm){
                this.$refs[editForm].validate((valid) => {
                    if (valid) {
                        editTeacher(this.editForm).then(res => {
                            if (res.data.code === 200){
                                this.$notify.success(res.data.message)
                                this.editDialog = false
                                this.editForm = {}
                                this.getList()
                            }
                        })
                    }
                });
            },
            //分页
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getList()
            }
        },
    }
</script >

<style scoped lang="less" >
	@import "../assets/style/common";
</style >
